<template>
  <div class="container">
    <div class="top">
      <el-button
        type="info"
        @click="
          () => {
            isEdit=false
            showdialog = true
            changeType(1)
          }
        "
      >+新增菜品分类</el-button>
      <el-button
        type="primary"
        @click="
          () => {
            isEdit=false
            showdialog = true
            changeType(2)
          }
        "
      >+新增套餐分类</el-button>
    </div>
    <div class="main">
      <el-table :data="categoryList" style="width: 100%">
        <el-table-column label="分类名称" prop="name" />
        <el-table-column label="分类类型" prop="type">
          <template v-slot="{ row }">
            {{ row.type === 1 ? "菜品分类" : "套餐分类" }}
          </template>
        </el-table-column>
        <el-table-column label="操作时间" prop="updateTime" />
        <el-table-column label="排序" prop="sort" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              type="text"
              @click="
                () => {
                  showdialog = true;
                  isEdit = true;
                  userForm = JSON.parse(JSON.stringify(row));
                  changeType(row.type);
                }
              "
            >修改</el-button>|
            <el-button type="text" @click="open(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row style="height: 60px" align="middle" type="flex" justify="center">
        <el-pagination
          :current-page="categoryParams.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="categoryParams.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @current-change="pageChange"
          @size-change="pageSizeChange"
        />
      </el-row>
    </div>
    <el-dialog
      :title="`${isEdit ? '编辑' : '新增'}${type === 1 ? '菜品' : '套餐'}分类`"
      width="500px"
      :visible.sync="showdialog"
      @close="btnCancel"
    >
      <el-form ref="addForm" :model="userForm">
        <el-form-item label="菜品名称" label-width="100px" prop="name">
          <el-input v-model="userForm.name" type="text" style="width: 300px" />
        </el-form-item>
        <el-form-item label="排序" label-width="100px" prop="sort">
          <el-input v-model="userForm.sort" type="text" style="width: 300px" />
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-button @click="btnCancel">取消</el-button>
            <el-button type="primary" @click="btnOk">确定</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addCategory, deleteCategory, getCategoryList } from '@/api/category'
export default {
  name: 'Category',
  data() {
    return {
      categoryList: [], // 存储分类管理数据
      categoryParams: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      showdialog: false,
      userForm: {
        name: '',
        sort: ''
      },
      type: 1,
      isEdit: false
    }
  },
  created() {
    this.getCategoryList()
  },
  methods: {
    changeType(type) {
      this.type = type
    },
    async getCategoryList() {
      const res = await getCategoryList(this.categoryParams)
      this.categoryList = res.data.records
      this.total = res.data.total
    },
    pageChange(newPage) {
      this.categoryParams.page = newPage
      this.getCategoryList()
    },
    pageSizeChange(newpageSize) {
      this.categoryParams.pageSize = newpageSize
      this.getCategoryList()
    },
    btnCancel() {
      this.userForm = {}
      this.showdialog = false
    },
    async btnOk() {
      await addCategory(this.userForm)
      this.$message.success('添加分类成功')
      this.getCategoryList()
      this.btnCancel()
    },
    open(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteCategory(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
      this.getCategoryList()
    }
  }
}
</script>

<style lang='scss' scoped>
.top {
  padding: 30px;
}
.main {
  margin: 0 30px;
}
</style>
